import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';

const GraphQLExplorerButton = () => {
    const navigate = useNavigate();

    const handleGoToGraphQLExplorer= () => {
    navigate('/GraphQLExplorer'); // 跳转到目标组件的路由
  };

  return (
    <>
      <Button
        type="primary"
        id="pipBtn"
        onClick={handleGoToGraphQLExplorer}
        style={{
          backgroundColor: "#FB7299",
          color: "white",
          padding: "14px 28px",
          border: "none",
          borderRadius: "6px",
          cursor: "pointer",
          fontSize: "16px",
          fontWeight: "bold",
          transition: "all 0.3s ease",
          boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
        }}
        onMouseOver={(e) => {
          e.target.style.backgroundColor = "#F53163";
          e.target.style.transform = "translateY(-2px)";
          e.target.style.boxShadow = "0 4px 8px rgba(0,0,0,0.3)";
        }}
        onMouseOut={(e) => {
          e.target.style.backgroundColor = "#FB7299";
          e.target.style.transform = "translateY(0)";
          e.target.style.boxShadow = "0 2px 5px rgba(0,0,0,0.2)";
        }}
      >
        打开《GraphiQLExplorer》
      </Button>
    </>
  );
};


export default GraphQLExplorerButton;